var timelineInterval;
var curTimeArr = {};
var playImg = "assets/css/images/play.png"; // 播放图片
var pauseImg = "assets/css/images/pause.png"; // 暂停图片
var today = ""; //保存最新数据日期
var yesterday = ""; //保存最新数据日期 前一天
var lastday = ""; //保存最新数据日期 前两天

/**
 * 时间轴的参数
 */
var timelineConfig = {
	hourTotal: 24, // 整个时间轴总共展示多个小时
	axisScale: 24, // 整个时间轴总共展示多少个刻度
	timeJumpInterval: 30, // 时间跳动间隔，单位:分钟
	timeShowInterval: 1, // 时间点展示间隔，比如设置为5，就展示为1,5,10,15这些点，其余的时间点就不展示
	initialTime: new Date(), //Date.parse(new Date().format("yyyy/MM/dd"))), // 初始化日期
	moveSpeed: 50, // 每一个刻度内的移动速度
	moveInterval: 50, // 运动时间间隔，此时间必须大于moveSpeed
	callback: function(time) { // 回调方法
		// 开始播放热力图
		startPlay(time);
	},
	callbackZero: function(time) { // 零时触发事件，以便更新日期
		if ($("#yesterdayId")) {
			$("#yesterdayId").html(yesterday);
		}
		if ($("#todayId")) {
			$("#todayId").html(today);
		}
	}
};

/**
 * 时间轴的方法
 */
var timelineFunc = {
	// 初始化
	init: function() {
		clearInterval(timelineInterval);

		// 初始化时间轴
		initTimeTip();

		// 重置
		this.reset();

		// 窗口变动了重绘
		$(window).resize(function() {
			initTimeTip();
		});

		$("#disablePlay").show();
		$("#ablePlay").hide();
	},

	// 隐藏
	hide: function() {
		clearInterval(timelineInterval);
		$(".timeline-box").hide();
	},

	// 重置
	reset: function() {
		clearInterval(timelineInterval);
		$("#playImg").attr("src", playImg);

		var _o = $("#timeBox");
		var wtb = _o.outerWidth();
		_o.css("left", -wtb / 2 + "px");

		$("#lineIn").width(0);

		var firstTime = this.getFirstTime();
		$("#time").html(firstTime.format("hh:mm")).attr("time",
			firstTime.format("yyyy/MM/dd hh:mm:ss"));
	},

	// 格式化初始时间，上个小时的整点
	formatInitialTime: function() {
		var t = timelineConfig.initialTime;
		var y = t.getFullYear();
		var m = t.getMonth() + 1;
		var d = t.getDate();
		var h = t.getHours();
		var mm = 0; //t.getMinutes();
		//if (mm < 30) {
		//	mm = 0;
		//} else {
		//	mm = 30;
		//}

		var nt = new Date(y + "/" + m + "/" + d + " " + h + ":" + mm + ":00");
		timelineConfig.initialTime = nt;
	},

	// 获取第一个时间点
	getFirstTime: function() {
		this.formatInitialTime();
		//- 3600*1000  上一个整点
		return new Date(timelineConfig.initialTime.getTime() - 3600 * 1000 - 1000 * 60 * timelineFunc.getAllMinutes());
	},

	// 获取整个时间轴总共有多少个分钟点，时间轴最小刻度为分钟
	getAllMinutes: function() {
		return timelineConfig.hourTotal * 60;
	},

	// 获取每个运动刻度的包含多少个分钟点
	getMoveMinutes: function() {
		return this.getAllMinutes() / this.getMoveScale();
	},

	// 获取实际有多少个运动点
	getMoveScale: function() {
		return this.getAllMinutes() / timelineConfig.timeJumpInterval
	},

	// 获取每个运动刻度占用#lineOut的长度
	getMoveWidth: function() {
		return this.getLineOutWidth() / this.getMoveScale();
	},

	// 获取某个运动刻度对应的时间，根据第一个刻度的时间来计算
	getMovePointTime: function(index) {
		var _o = $(".time-tip:first");
		var tstr = _o.attr("time");

		var firstTime = new Date(tstr);
		var pTime = new Date(firstTime.getTime() + 1000 * 60 * this.getMoveMinutes() * index);
		return pTime;
	},

	// 根据#timeBox获取当前时间轴的运动点
	getTimeLineCurIndex: function() {
		var _o = $("#timeBox");

		var wlo = this.getLineOutWidth();
		var left = _o.position().left;
		var wo = _o.width();

		// 因为#timeBox中心点的关系，所以需要left需要增加1/2的宽度
		left += wo / 2;

		if (left < 0) {
			left = 0;
		} else if (left > wlo) {
			left = wlo;
		}

		// 判断最近的运动点
		var mss = this.getMoveScale();
		var per = left / wlo * mss;
		var up = Math.ceil(left / wlo * mss); // 向上取整
		var down = Math.floor(left / wlo * mss); // 向下取整
		var index = up;
		if (Math.abs(up - per) >= Math.abs(down - per)) {
			// 如果靠近向下取整，则采用向下取整
			index = down;
		}

		if (index < 0) {
			index = 0;
		} else if (index > mss) {
			index = mss;
		}

		return index;
	},

	// 根据#timeBox获取当前时间轴的时间
	getTimeLineCurTime: function() {
		var index = this.getTimeLineCurIndex();
		var time = this.getMovePointTime(index);

		return time;
	},

	// 获取#lineOut的宽度
	getLineOutWidth: function() {
		// 为了保证timeBox的中心点在#lineBox的边缘
		return $("#lineOut").width();
	},

	// 改变进度条长度
	changeTimeLine: function() {
		var _ot = $("#timeBox");
		var _oli = $("#lineIn");

		var len = _ot.position().left + 20;
		if (len < 0) {
			len = 0;
		}
		len += 'px';
		_oli.width(len);
	},

	// 改变进度条显示时间
	changeTime: function() {
		var time = this.getTimeLineCurTime();
		var index = this.getTimeLineCurIndex();
		var tstr = time.format("hh:mm");

		var _ot = $("#time");
		_ot.html(tstr);

		// 回调方法
		var a = timelineConfig.timeJumpInterval * 60 * 1000;
		var firstTime = new Date($(".time-tip").attr("time"));
		var p = time.getTime() - firstTime.getTime();

		// 回调方法
		if (p % a == 0 && null == curTimeArr[time]) {
			curTimeArr[time] = time;
			timelineConfig.callback(time);
		}

		// 零时触发事件，以便更新日期
		var h = time.getHours();
		var mm = time.getMinutes();
		var s = time.getSeconds();
		if ((h == 0) && (mm == 0) && (s == 0)) {
			timelineConfig.callbackZero(time);
		}

		var timeArr = $("#timeTipBox li");
		if (timeArr.length > 24) {
			var nowt = $(timeArr[24]).attr('time');
			var tStr = time.format("yyyy/MM/dd hh:mm:ss");
			if (nowt == tStr) {
				//对比播放结束，
				if ($("#yesterdayId")) {
					$("#yesterdayId").html(lastday);
				}
				if ($("#todayId")) {
					$("#todayId").html(yesterday);
				}
			}
		}
	}
};

/**
 * 初始化时间轴
 */
function initTimeTip() {
	var _o = $("#timeTipBox");
	// 清空
	_o.empty();
	curTimeArr = {};

	// 格式化初始时间，最近的半个整点
	timelineFunc.formatInitialTime();

	// 生成时间轴
	var tArr = [];
	for (var i = timelineConfig.axisScale; i >= 0; i--) {
		// 排除非展示时间点
		if (i % timelineConfig.timeShowInterval != 0) {
			continue
		}
		var str = '<li class="time-tip" time="$2">$1</li>';
		//- 3600*1000  上一个整点
		var time = new Date(timelineConfig.initialTime.getTime() - 3600 * 1000 - 1000 * 60 * timelineFunc.getAllMinutes() / timelineConfig.axisScale * i);

		str = str.replace("$1", time.format("hh:mm")).replace("$2",
			time.format("yyyy/MM/dd hh:mm:ss"));
		tArr.push(str);

		// 设置#time的时间为第一个刻度的时间
		if (i == timelineConfig.axisScale) {
			$("#time").html(time.format("hh:mm")).attr("time",
				time.format("yyyy/MM/dd hh:mm:ss"));
		}
	}
	tArr = tArr.join("");
	_o.append($(tArr));

	$(".timeline-box").show();

	// 设置宽度
	$(".time-tip").css("width", 100 / $(".time-tip").length + "%");
	$("#lineOut").css("margin", "0 " + ($(".time-tip").outerWidth() / 2) + "px");

	// 绑定拖拽事件
	bindTimeDrag();
}

/**
 * 播放时间轴
 */
function autoPlay() {
	curTimeArr = {};

	timelineInterval = setInterval(function() {
		var w = timelineFunc.getLineOutWidth();
		var _otb = $("#timeBox");
		var tbw = _otb.width();

		// 运动动画
		var curLeft = _otb.position().left;
		if ((curLeft + 1) > (w - tbw / 2)) {
			$("#lineIn").width(0);
			_otb.css("left", -tbw / 2 + "px");
			$("#playImg").attr("src", playImg);
			clearInterval(timelineInterval);
			return;
		}
		_otb.css("left", curLeft + 3 + "px");

		// 改变显示时间
		timelineFunc.changeTime();

		// 改变进度条长度
		timelineFunc.changeTimeLine();
	}, timelineConfig.moveInterval);
}

/**
 * 绑定拖拽事件
 */
function bindTimeDrag() {
	$("#timeBox").unbind().bind("mousedown", timeDragDown);

}

function timeDragDown(e) {
	var _o = $(this);
	$(document).bind("mousemove", timeDragMove);
	$(document).bind("mouseup", timeDragUp);
}

function timeDragMove(e) {
	var _o = $("#timeBox");
	var _olo = $("#lineOut");

	var wlo = timelineFunc.getLineOutWidth();
	var llo = _olo.offset().left;
	var wo = _o.width();

	// 鼠标位置
	var mouseX = e.clientX;

	// 对鼠标位置进行转化，对应#lineOut中的left
	var left = 0;
	if (mouseX <= llo) {
		// 最左侧判断
		left = 0;
	} else if (mouseX >= (wlo + llo)) {
		// 最右侧判断
		left = wlo;
	} else {
		left = mouseX - llo;
	}

	// 判断最近的运动点
	var mss = timelineFunc.getMoveScale();
	var per = left / wlo * mss;
	var up = Math.ceil(left / wlo * mss); // 向上取整
	var down = Math.floor(left / wlo * mss); // 向下取整
	var index = up;
	if (Math.abs(up - per) >= Math.abs(down - per)) {
		// 如果靠近向下取整，则采用向下取整
		index = down;
	}

	// 将运动点转化成实际宽度
	left = index * timelineFunc.getMoveWidth();

	// 让timeBox的中心点处在鼠标的位置
	left -= wo / 2;

	_o.css({
		"left": left
	});

	// 改变进度条长度
	timelineFunc.changeTimeLine();

	// 改变显示时间
	timelineFunc.changeTime();
}

function timeDragUp(e) {
	var _o = $("#timeBox");

	$(document).unbind("mousemove", timeDragMove);
	$(document).unbind("mouseup", timeDragUp);

	if (_o[0].setCapture) {
		_o[0].releaseCapture();
	} else if (window.captureEvents) {
		window.releaseEvents(_shadow[0].mousemove);
	}
}

/**
 * 点击播放
 */
function play() {
	var _o = $("#playImg");
	var img = _o.attr("src");

	if (img == playImg) {
		img = pauseImg;
		// 自动播放
		autoPlay();
	} else {
		img = playImg;
		// 暂停自动播放
		window.clearInterval(timelineInterval);
	}
	_o.attr("src", img);
}

/**
 * 日期格式化
 */
Date.prototype.format = function(format) {
	var o = {
		"M+": this.getMonth() + 1, // month
		"d+": this.getDate(), // day
		"h+": this.getHours(), // hour
		"m+": this.getMinutes(), // minute
		"s+": this.getSeconds(), // second
		"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
		"S": this.getMilliseconds()
			// millisecond
	}
	if (/(y+)/.test(format))
		format = format.replace(RegExp.$1, (this.getFullYear() + "")
			.substr(4 - RegExp.$1.length));
	for (var k in o)
		if (new RegExp("(" + k + ")").test(format))
			format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
	return format;
}